<html style="height: 100%">
<head><#include "/base/head.html">
</head>
<body style="height: 100%">
	<div style="padding: 10px; height: 95%;">
		<div style="height: 25%;">
			<form id="lovForm" method="post" action="${contextPath}/sys/lov/queryLovs">
				<table cellpadding="8">
					<tbody>
						<tr>
							<td>lov名字</td>
							<td>
								<input class="easyui-textbox" type="text" name="lov_name" />
							</td>
							<td>url</td>
							<td>
								<input class="easyui-textbox" type="text" name="url" />
							</td>
							<td>sql Id</td>
							<td>
								<input class="easyui-textbox" type="text" name="sqlid" />
							</td>
						</tr>
					</tbody>
				</table>
			</form>
			<div style="text-align: left; padding: 5px">
				<a id="lovSearchSubmit" href="javascript:void(0)"
					class="easyui-linkbutton mediumButton">查询</a>
			</div>
		</div>
		<script type="text/javascript">
			$(function() {

				var deleteUrl = "";
				refreshGrid();
				$("#lovSearchSubmit").click(function() {
					refreshGrid();
				});
				/*
				//点击编辑lov
				$("#lovEdit").click(function() {
					$("#lovFormEdit").form('clear');

					var selected = $("#lovGrid").datagrid('getSelected');
					if (selected == null) {
						alert("请先选择lov");
						return;
					}

					$("#lovFormEdit").attr("action", $(this).attr("postUrl"));
					$('#lovFormDlg').dialog({
						"iconCls" : "icon-edit",
						"title" : "lov修改"
					});
					$('#lovFormDlg').dialog('open');

					var params = new Object();
					params.id = selected.id;

					BaseJs.setFormByUrl("#lovFormEdit", params);
				});
				*/
				
				//初始化页面
				function init() {
					$("#lovFormEdit").form('clear');
					$("#lovForm").form('clear');

					refreshGrid();
				}

				//根据form里面的信息获取并填充grid
				function refreshGrid() {
					BaseJs.formChangeGrid("#lovForm", "#lovGrid");
				}
				/*
				$("#lovAdd").click(function() {
					$("#lovFormEdit").form('clear');
					$("#lovFormEdit").attr("action", $(this).attr("postUrl"));
					$('#lovFormDlg').dialog({
						"iconCls" : "icon-add",
						"title" : "lov新增"
					});
					$('#lovFormDlg').dialog('open');
				});
				*/
				
				$("#lovDelete").click(function() {
					var selected = $("#lovGrid").datagrid('getSelected');
					if (selected == null) {
						alert("请先选择lov");
						return;
					}
					var params = new Object();
					params.id = selected.id;
					BaseJs.ajax($(this).attr('postUrl'), params, function() {
						refreshGrid();
						alert("删除lov成功");
					})

				});
				//修改的弹出框按提交
				$("#lovSubmitEdit").click(function() {
					BaseJs.submitForm("#lovFormEdit", function(rData) {
						//修改完重新查询
						$("#lovSearchSubmit").click();
						$('#lovFormDlg').dialog('close');
					});

				});
			});
		</script>
		<div style="height: 75%">
			<div id="lovToolbar">
				<!-- 
				<a id="lovAdd" postUrl="sys/" href="javascript:void(0)"
					class="easyui-linkbutton" iconcls="icon-add" plain="true">新增</a>
				<a id="lovEdit" postUrl="lov/addUpdateLov" href="javascript:void(0)"
					class="easyui-linkbutton" iconcls="icon-edit" plain="true">编辑</a>
				<a id="lovDelete" postUrl="lov/deleteLov" href="javascript:void(0)"
					class="easyui-linkbutton" iconcls="icon-remove" plain="true">删除</a>
					 -->
				<a href="javascript:void(0)" class="easyui-linkbutton"
					data-options="iconCls:'icon-add',plain:true" onclick="append()">添加</a>
				<a href="javascript:void(0)" class="easyui-linkbutton"
					data-options="iconCls:'icon-remove',plain:true" onclick="removeLov()">删除</a>
				<a href="javascript:void(0)" class="easyui-linkbutton"
					data-options="iconCls:'icon-undo',plain:true" onclick="reject()">撤销</a>
				<a href="javascript:void(0)" class="easyui-linkbutton"
					data-options="iconCls:'icon-save',plain:true" onclick="accept()">保存</a>
			</div>

			<div id="lovFormDlg" class="easyui-dialog" title="lov新增"
				data-options="iconCls:'icon-add',closed: true"
				style="width: 400px; height: 400px; padding: 10px; text-align: center;">
				<!-- 弹出框用来增加和编辑-->
				<form id="lovFormEdit" method="post">
					<table align="center" cellpadding="8">
						<tr>
							<td>lov名字</td>
							<td>
								<div>
									<input class="easyui-textbox" type="text" name="text" />
								</div>
							</td>
						</tr>
						<tr>
							<td>lovurl</td>
							<td>
								<div>
									<input class="easyui-textbox" type="text" name="url" />
								</div>
							</td>
						</tr>
						<tr>
							<td>父lovID</td>
							<td>
								<div>
									<input class="easyui-textbox" type="text" name="parentId" />
								</div>
							</td>
						</tr>
					</table>
					<input type="hidden" name="id">
				</form>

				<div style="text-align: center; margin: 10px">
					<a id="lovSubmitEdit" href="javascript:void(0)"
						class="easyui-linkbutton mediumButton">确定</a>
					&nbsp;
					<a href="javascript:void(0)" class="easyui-linkbutton mediumButton"
						onclick=" $('#lovFormDlg').dialog('close');">取消</a>
				</div>
			</div>
			<table id="lovGrid" toolbar="#lovToolbar" class="easyui-datagrid" title="lov显示"
				style="width: 100%; height: 100%;"
				data-options="singleSelect:true,method:'post',fitColumns : true, onClickCell: onClickCell">
				<thead>
					<tr>
						<th data-options="field:'id',width:50,align:'center'">id</th>
						<th data-options="field:'lovName',width:50,align:'center',editor:'textbox'">lov名字</th>
						<th data-options="field:'url',width:100,align:'center',editor:'textbox'">url</th>
						<th data-options="field:'sqlid',width:100,align:'center',editor:'textbox'">sqlID</th>
						<th data-options="field:'textField',width:100,align:'center',editor:'textbox'">textField</th>
						<th data-options="field:'valueField',width:100,align:'center',editor:'textbox'">valueField</th>
						<th data-options="field:'edit',width:100,align:'center',formatter:editFormatter">操作</th>
					</tr>
				</thead>
			</table>


			<script type="text/javascript">
				function editFormatter(val,data) {
					return "<a class='editLovItem' lovId='" + data.id + "' href='#'>编辑</a>";
				}
				
				$(document).on("click",".editLovItem",function(){
					var lovId = $(this).attr("lovId");
					$("#lovItemGrid").attr("lovId",lovId);
					console.log(lovId);
					refreshLovItems(lovId);
					
					$('#lovItemGridDlg').dialog({
					    title: 'lovItem 编辑',
					    width: 400,
					    height: 400,
					    closed: false,
					    modal: true
					});
				});
				
				
				var editIndex = undefined;
				function endEditing() {
					if (editIndex == undefined) {
						return true
					}
					if ($('#lovGrid').datagrid('validateRow', editIndex)) {
						$('#lovGrid').datagrid('endEdit', editIndex);
						editIndex = undefined;
						return true;
					} else {
						return false;
					}
				}

				function onClickCell(index, field) {
					if (editIndex != index) {
						if (endEditing()) {
							$('#lovGrid').datagrid('selectRow', index).datagrid('beginEdit', index);
							var ed = $('#lovGrid').datagrid('getEditor', {
								index : index,
								field : field
							});
							if (ed) {
								($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
							}
							editIndex = index;
						} else {
							setTimeout(function() {
								$('#lovGrid').datagrid('selectRow', editIndex);
							}, 0);
						}
					}
				}

				function accept() {
					if (endEditing()) {
						var rows = $('#lovGrid').datagrid('getChanges');
						var jsonRows = JSON.stringify(rows);
						console.log(jsonRows);
						$('#lovGrid').datagrid('acceptChanges');

						BaseJs.ajax("${contextPath}/sys/lov/addUpdateLov", {lovsStr:jsonRows}, function(){
							$("#lovSearchSubmit").click();
						})
					}else {
						console.log("保存失败");
					}
				}

				function endEditing() {
					if (editIndex == undefined) {
						return true
					}
					if ($('#lovGrid').datagrid('validateRow', editIndex)) {
						$('#lovGrid').datagrid('endEdit', editIndex);
						editIndex = undefined;
						return true;
					} else {
						return false;
					}
				}

				function append() {
					if (endEditing()) {
						$('#lovGrid').datagrid('appendRow',{});
						editIndex = $('#lovGrid').datagrid('getRows').length - 1;
						
						$('#lovGrid').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
					}
				}
				
				function removeLov() {
					if (editIndex == undefined) {
						return
					}
					var res = confirm("确定要删除吗?");
					if(res) {
						var rows = $('#lovGrid').datagrid('getRows');

						BaseJs.ajax("${contextPath}/sys/lov/deleteLov", {id:rows[editIndex].id}, function(){
							$("#lovSearchSubmit").click();
						})
						
						$('#lovGrid').datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex);
						
						editIndex = undefined;
					}
				}
				
				function reject(){
		            $('#lovGrid').datagrid('rejectChanges');
		            editIndex = undefined;
		        }
			</script>
		</div>





		<script>
		var editLovItemIndex = undefined;
		function endEditingLovItem() {
			if (editLovItemIndex == undefined) {
				return true
			}
			if ($('#lovItemGrid').datagrid('validateRow', editLovItemIndex)) {
				$('#lovItemGrid').datagrid('endEdit', editLovItemIndex);
				editLovItemIndex = undefined;
				return true;
			} else {
				return false;
			}
		}

		function onClickCellLovItem(index, field) {
			if (editLovItemIndex != index) {
				if (endEditingLovItem()) {
					$('#lovItemGrid').datagrid('selectRow', index).datagrid('beginEdit', index);
					var ed = $('#lovItemGrid').datagrid('getEditor', {
						index : index,
						field : field
					});
					if (ed) {
						($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
					}
					editLovItemIndex = index;
				} else {
					setTimeout(function() {
						$('#lovItemGrid').datagrid('selectRow', editLovItemIndex);
					}, 0);
				}
			}
		}
		//保存lovitem的设置
		function acceptLovItem() {
			if (endEditingLovItem()) {
				var rows = $('#lovItemGrid').datagrid('getChanges');
				var lovId = $("#lovItemGrid").attr("lovId");

				if(lovId == null) {
					alert("保存失败!")
					return ;
				}
					
				for(var i = 0 ;i<rows.length ;i++) {
					rows[i].lovId = lovId;
				}
				console.log(rows);
				var jsonRows = JSON.stringify(rows);
				
				$('#lovItemGrid').datagrid('acceptChanges');

				BaseJs.ajax("${contextPath}/sys/lovItem/addUpdateLovItem", {lovsItemStr:jsonRows}, function(){
					$("#lovSearchSubmit").click();
				});
				
				refreshLovItems();
				
			}else {
				console.log("保存失败");
			}
		}

		function endEditingLovItem() {
			if (editLovItemIndex == undefined) {
				return true
			}
			if ($('#lovItemGrid').datagrid('validateRow', editLovItemIndex)) {
				$('#lovItemGrid').datagrid('endEdit', editLovItemIndex);
				editLovItemIndex = undefined;
				return true;
			} else {
				return false;
			}
		}
		//后面追加lovItem
		function appendLovItem() {
			if (endEditingLovItem()) {
				$('#lovItemGrid').datagrid('appendRow',{});
				editLovItemIndex = $('#lovItemGrid').datagrid('getRows').length - 1;
				
				$('#lovItemGrid').datagrid('selectRow', editLovItemIndex).datagrid('beginEdit', editLovItemIndex);
			}
		}
		
		function removeLovItem() {
			if (editLovItemIndex == undefined) {
				return
			}
			var res = confirm("确定要删除吗?");
			if(res) {
				var rows = $('#lovItemGrid').datagrid('getRows');

				BaseJs.ajax("${contextPath}/sys/lovItem/deleteLovItem", {id:rows[editLovItemIndex].id}, function(){
					$("#lovSearchSubmit").click();
				})
				
				$('#lovItemGrid').datagrid('cancelEdit', editLovItemIndex).datagrid('deleteRow', editLovItemIndex);
				
				editLovItemIndex = undefined;
			}
		}
		//撤销lovItem
		function rejectLovItem() {
            $('#lovItemGrid').datagrid('rejectChanges');
            editLovItemIndex = undefined;
        }
		
		
		function refreshLovItems(lovId) {
			$('#lovItemGrid').datagrid({data:[]})
			if(lovId == null)
				lovId = $("#lovItemGrid").attr("lovId");
			
			if(lovId == null) {
				alert("刷新失败");
				return ;
			} 
				
			BaseJs.ajax("${contextPath}/sys/lovItem/queryLovItems", {lovId:lovId}, function(r){
				$('#lovItemGrid').datagrid( {data:r.data} );
			});
		}
		
		</script>
		<div id="lovItemToolbar">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				data-options="iconCls:'icon-add',plain:true" onclick="appendLovItem()">添加</a>
			<a href="javascript:void(0)" class="easyui-linkbutton"
				data-options="iconCls:'icon-remove',plain:true" onclick="removeLovItem()">删除</a>
			<a href="javascript:void(0)" class="easyui-linkbutton"
				data-options="iconCls:'icon-undo',plain:true" onclick="rejectLovItem()">撤销</a>
			<a href="javascript:void(0)" class="easyui-linkbutton"
				data-options="iconCls:'icon-save',plain:true" onclick="acceptLovItem()">保存</a>
		</div>
		<div id="lovItemGridDlg">
			<table id="lovItemGrid" toolbar="#lovItemToolbar" class="easyui-datagrid"
				style="width: 100%; height: 100%;" lovId=""
				;
				data-options="singleSelect:true,method:'post',fitColumns : true, onClickCell: onClickCellLovItem">
				<thead>
					<tr>
						<th data-options="field:'id',width:50,align:'center'">id</th>
						<th data-options="field:'text',width:100,align:'center',editor:'textbox'">text</th>
						<th data-options="field:'value',width:100,align:'center',editor:'textbox'">value</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
</body>
</html>